<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云工管系统</title>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#64748b'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=VXBBZ-4FWRQ-P6H5D-2SLOG-P3RYQ-LHF2Q"></script>
<style>
body {
min-height: 1024px;
background-color: #f8fafc;
}
.stat-card {
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container mx-auto px-4 py-8 max-w-[1440px]">
<div class="grid grid-cols-5 gap-6 mb-6">
<div class="stat-card p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-600 text-sm font-medium">设备总数</h3>
<i class="fas fa-truck text-primary text-xl w-8 h-8 flex items-center justify-center"></i>
</div>
<p class="text-3xl font-semibold text-gray-900">1,286</p>
</div>
<div class="stat-card p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-600 text-sm font-medium">设备工作数量</h3>
<i class="fas fa-signal text-primary text-xl w-8 h-8 flex items-center justify-center"></i>
</div>
<p class="text-3xl font-semibold text-gray-900">1,090</p>
</div>
<div class="stat-card p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-600 text-sm font-medium">视频监控总数</h3>
<i class="fas fa-video text-primary text-xl w-8 h-8 flex items-center justify-center"></i>
</div>
<p class="text-3xl font-semibold text-gray-900">864</p>
</div>
<div class="stat-card p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-600 text-sm font-medium">视频在线数量</h3>
<i class="fas fa-camera text-primary text-xl w-8 h-8 flex items-center justify-center"></i>
</div>
<p class="text-3xl font-semibold text-gray-900">756</p>
</div>
<div class="stat-card p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-600 text-sm font-medium">项目部总数</h3>
<i class="fas fa-building text-primary text-xl w-8 h-8 flex items-center justify-center"></i>
</div>
<p class="text-3xl font-semibold text-gray-900">42</p>
</div>
</div>
<div class="grid grid-cols-1 gap-6 mb-6">
<div class="stat-card">
<div class="p-4 border-b border-gray-100 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-900">设备分布地图</h3>
<div class="flex gap-2">
<button class="px-4 py-2 bg-blue-100 text-blue-700 !rounded-button whitespace-nowrap flex items-center">
<i class="fas fa-truck mr-2"></i>
设备
</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 !rounded-button whitespace-nowrap flex items-center">
<i class="fas fa-building mr-2"></i>
项目部
</button>
</div>
</div>
<div id="map" style="height: 500px;"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="stat-card">
<div class="p-4 border-b border-gray-100">
<h3 class="text-lg font-medium text-gray-900">设备状态分布</h3>
</div>
<div id="deviceStatus" style="height: 300px;"></div>
</div>
<div class="stat-card">
<div class="p-4 border-b border-gray-100 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-900">项目部开工率排名</h3>
<div class="text-sm text-gray-500">单位：%</div>
</div>
<div id="projectStatus" style="height: 300px;"></div>
</div>
<div class="stat-card">
<div class="p-4 border-b border-gray-100">
<h3 class="text-lg font-medium text-gray-900">设备类型分布</h3>
</div>
<div id="deviceTypes" style="height: 300px;"></div>
</div>
</div>
</div>
<script>
window.onload = function() {
var center = new qq.maps.LatLng(30.275423, 119.964901);
var map = new qq.maps.Map(document.getElementById("map"), {
center: center,
zoom: 7
});
// 添加中心点标注
var centerMarker = new qq.maps.Marker({
position: center,
map: map,
icon: new qq.maps.MarkerImage(
'https://mastergo.com/ai/api/search-image?query=A simple excavator icon in solid color, pure white background, suitable for map marker, flat style&width=24&height=24&orientation=squarish',
new qq.maps.Size(24, 24),
new qq.maps.Point(0, 0),
new qq.maps.Point(12, 12)
)
});
// 添加中心点信息窗
var centerInfo = new qq.maps.InfoWindow({
map: map
});
centerInfo.open();
centerInfo.setContent('<div style="padding: 10px;">杭州宇墨智联科技有限公司</div>');
centerInfo.setPosition(center);
// 模拟设备位置数据
const deviceLocations = [
{ lat: 30.275423, lng: 119.964901, count: 156 },
{ lat: 31.230416, lng: 121.473701, count: 234 },
{ lat: 29.875168, lng: 121.549792, count: 178 },
{ lat: 28.668283, lng: 121.420757, count: 167 },
{ lat: 30.753924, lng: 120.850420, count: 198 },
{ lat: 29.985295, lng: 122.207216, count: 145 },
{ lat: 28.970079, lng: 118.859457, count: 208 },
{ lat: 29.977601, lng: 119.791272, count: 165 }
];
// 创建标记和信息窗口
deviceLocations.forEach(location => {
const marker = new qq.maps.Marker({
position: new qq.maps.LatLng(location.lat, location.lng),
map: map,
icon: new qq.maps.MarkerImage(
'https://mastergo.com/ai/api/search-image?query=A simple excavator icon in solid color, pure white background, suitable for map marker, flat style&width=24&height=24&orientation=squarish',
new qq.maps.Size(24, 24),
new qq.maps.Point(0, 0),
new qq.maps.Point(12, 12)
)
});
const info = new qq.maps.InfoWindow({
map: map
});
qq.maps.event.addListener(marker, 'click', function() {
info.open();
if(location.lat === 29.977601 && location.lng === 119.791272) {
info.setContent(`<div style="padding: 10px;">建德市项目部<br>设备数量: ${location.count} 台</div>`);
} else {
info.setContent(`<div style="padding: 10px;">设备数量: ${location.count} 台</div>`);
}
info.setPosition(new qq.maps.LatLng(location.lat, location.lng));
});
// 特别标注建德市项目部位置
if(location.lat === 29.977601 && location.lng === 119.791272) {
const specialMarker = new qq.maps.Marker({
position: new qq.maps.LatLng(location.lat, location.lng),
map: map,
icon: new qq.maps.MarkerImage(
'https://mastergo.com/ai/api/search-image?query=A simple excavator icon in solid color, pure white background, suitable for map marker, flat style&width=24&height=24&orientation=squarish',
new qq.maps.Size(24, 24),
new qq.maps.Point(0, 0),
new qq.maps.Point(12, 12)
)
});
const specialInfo = new qq.maps.InfoWindow({
map: map
});
specialInfo.open();
specialInfo.setContent('<div style="padding: 10px;">建德市项目部</div>');
specialInfo.setPosition(new qq.maps.LatLng(location.lat, location.lng));
}
});
var deviceStatusChart = echarts.init(document.getElementById('deviceStatus'));
deviceStatusChart.setOption({
animation: false,
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [{
name: '设备状态',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 856, name: '工作中' },
{ value: 234, name: '怠速' },
{ value: 196, name: '离线' }
]
}]
});
var projectStatusChart = echarts.init(document.getElementById('projectStatus'));
projectStatusChart.setOption({
animation: false,
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
max: 100,
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
type: 'category',
data: ['温州项目部', '杭州项目部', '湖州项目部', '宁波项目部', '绍兴项目部'].reverse(),
axisLine: {show: false},
axisTick: {show: false}
},
series: [{
data: [95, 92, 90, 88, 87].reverse(),
type: 'bar',
name: '开工率',
barWidth: '60%',
label: {
show: true,
position: 'right',
formatter: '{c}%'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: '#2563eb'},
{offset: 1, color: '#60a5fa'}
])
}
}]
});
var deviceTypesChart = echarts.init(document.getElementById('deviceTypes'));
deviceTypesChart.setOption({
animation: false,
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '设备类型',
type: 'pie',
radius: '50%',
data: [
{ value: 435, name: '挖掘机' },
{ value: 310, name: '装载机' },
{ value: 234, name: '推土机' },
{ value: 155, name: '起重机' },
{ value: 147, name: '压路机' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
window.addEventListener('resize', function() {
deviceStatusChart.resize();
projectStatusChart.resize();
deviceTypesChart.resize();
});
}
</script>
</body>
</html>
